import Globals from "./globals.min.js";
import gsap from "./gsap/gsap.js";
import { CustomEase } from "./gsap/CustomEase.js";
import carlZoom from "./carlZoom.min.js";
import { ScrollTrigger } from "./gsap/ScrollTrigger.js";
import { ScrollToPlugin } from "./gsap/ScrollToPlugin.js";
import OurServer from "./OurServer.js";
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, CustomEase);
Globals.tl = gsap.timeline();
// ------------------------
Globals.commonSection = {
  // 手机端 product-category 下拉菜单
  productCategoryMenu/**未使用，设计师不要下拉 */: function () {
    $(".aside-title").on("click", function () {
      var content = $(this).parent().find(".aside-container");
      content.slideToggle(300);
    });
  },
  scalcSubNavWidth: function () {
    let subnavs = document.querySelectorAll(".subnav");
    if (!subnavs[0]) return;
    subnavs.forEach(function (subnav) {
      var rect = window.getComputedStyle(subnav);
      var width = parseFloat(rect.width);
      subnav.style.marginLeft = -(width / 2) + "px";
    });
  },
  subnavFirstItemHover /**未使用 */: function () {
    let subnavs = document.querySelectorAll(".subnav");
    if (!subnavs[0]) return;
    subnavs.forEach(function (subnav) {
      let child1 = subnav.children[0];
      child1.addEventListener("mouseenter", function () {
        subnav.classList.add("firstitementer");
      });
      child1.addEventListener("mouseleave", function () {
        subnav.classList.remove("firstitementer");
      });
    });
  },
  magnet: function () {
    const btn = document.querySelectorAll(".magnet");
    if (!btn[0] || $(window).width() <= 768) return;
    const update = function (e) {
      const circle = this.querySelector(".magnet_circle"),
        arrow = this.querySelector(".magnet_arrow"),
        { offsetX: x, offsetY: y } = e,
        { offsetWidth: width, offsetHeight: height } = this,
        walk = 6,
        xWalk = (x / width) * (walk * 3) - walk * 1.5,
        yWalk = (y / height) * (walk * 1.5) - walk * 0.5,
        t = function (e) {
          gsap.to(e, 0.3, {
            scale: arrow === e ? 0.8 : 1.1,
            ease: "power2.out",
            x: xWalk,
            y: yWalk,
          });
        },
        k = function (e) {
          gsap.to(e, 0.3, {
            scale: 1,
            ease: "power2.out",
            x: 0,
            y: 0,
          });
        };

      if ("mousemove" === e.type) {
        t(circle);
        t(arrow);
      }
      if ("mouseleave" === e.type) {
        k(circle);
        k(arrow);
      }
    };
    btn.forEach((b) => b.addEventListener("mousemove", update));
    btn.forEach((b) => b.addEventListener("mouseleave", update));
  },
  // 如果浏览器滚动了距离 top-line 加上fixed样式
  ifBrowserScrollThenTopLineAddClas: function () {
    var topLine = document.querySelector(".top-line");
    if (Globals.windowWidth() <= Globals.mobileWidth) return;
    if (Globals.getWinScrollTop() > 0 && topLine) {
      topLine.classList.add("fixed");
    }
  },

  mobTopNavHandle: function () {
    if (!$(".nav")[0]) return;
    var tt = true;
    $(".nav").on("click", function () {
      $(this).toggleClass("animated");
      if (tt) {
        $(".nav-content").fadeIn();
      } else {
        $(".nav-content").fadeOut();
      }
      tt = !tt;
    });
    $(".dropdown2").on("click", function () {
      var nav2 = $(this).parent().find(".sub-nav2");
      nav2.slideToggle();
    });
  },

  // 滚动到mark位置
  moveToMark: function () {
    var markStarts = document.querySelectorAll(".markStart");
    if (!markStarts[0]) return;
    markStarts.forEach(function (markstart, index) {
      var markend = markstart.dataset.markend;
      if (markend.length === 0) return;
      var markendDom = document.querySelector(markend);
      if (!markendDom) return;
      markstart.addEventListener("click", function () {
        gsap.to(window, 0.3, { scrollTo: { y: markend } });
      });
    });
  },
  // 移动到新页面的 mark 位置
  moveToNewPageMark: /*未使用*/ function () {
    if (window.location.hash) {
      var hash = window.location.hash;
      var hash1 = hash.slice(1);
      var markDom = document.querySelector("[data-mark='" + hash1 + "']");
      gsap.to(window, 1.5, {
        scrollTo: { y: markDom },
        onComplete: function () {
          history.replaceState(
            null,
            "",
            window.location.href.replace(window.location.hash, "")
          );
        },
      });
    }
  },
  // top-line动画
  topLineAnimate: function () {
    window.addEventListener("scroll", function (e) {
      var topline = document.querySelector(".top-line");
      if (Globals.windowWidth() <= Globals.mobileWidth) return;
      if (Globals.getWinScrollTop()) {
        topline.classList.add("fixed");
      }
      if (Globals.getWinScrollTop() === 0) {
        topline.classList.remove("fixed");
      }
    });
  },
  // 初始化wow
  initWOW: function () {
    if (
      typeof WOW !== "function" ||
      Globals.windowWidth() <= Globals.mobileWidth
    )
      return;
    new WOW().init();
  },
  // 下拉选择框
  dataList: function () {
    var datalist = document.querySelectorAll(".dropdown-toggle");
    if (!datalist[0]) return;
    datalist.forEach(function (item) {
      item.addEventListener("click", function (e) {
        Globals.stopBubble(e);
        item.nextElementSibling.style.display = "block";
      });
    });
    var selectlist = document.querySelectorAll(".dropdown-menu");
    if (!selectlist[0]) return;
    selectlist.forEach(function (item) {
      item.addEventListener("click", function (e) {
        Globals.stopBubble(e);
        var target = e.target;
        if (target.tagName === "LI") {
          this.style.display = "none";
          var perious = target.parentNode.previousElementSibling;
          perious.querySelector(".dropdown-txt").innerHTML = target.innerText;
        }
      });
    });

    document.addEventListener("click", function (e) {
      selectlist.forEach(function (item) {
        item.style.display = "none";
      });
    });
  },
  initLazyLoad: function () {
    if (typeof lazyload !== "function") return;
    var images = document.querySelectorAll(".lazyload");
    lazyload(images);
    // $("img.lazyload").lazyload();
  },
  initMap: function () {
    if (!Globals.ctx) return;
    Globals.commonSection.allInfoInit();
    Globals.ctx.clearRect(0, 0, markinfoCanvas.width, markinfoCanvas.height);
  },
  allInfoInit: function () {
    var markchild = document.querySelectorAll(".markinfo .info");
    if (markchild.length === 0) return;
    markchild.forEach(function (elem) {
      elem.style.top = -25 - elem.clientHeight + "px";
      elem.classList.remove("on");
    });
  },
  fourthScreenMarkClickEmit: function (color) {
    var markinfoCanvas = document.querySelector("#markinfoCanvas");
    var markinfo = document.querySelectorAll(".markinfo");
    if (!markinfoCanvas || !markinfo[0]) return;
    Globals.ctx = markinfoCanvas.getContext("2d");

    document.onkeydown = function (e) {
      if (e.keyCode === 27) {
        Globals.commonSection.initMap();
      }
    };

    markinfo.forEach(function (item) {
      item.addEventListener("click", function (e) {
        if (e.target.classList.contains("circle")) {
          Globals.commonSection.allInfoInit();
          var _this = this;
          var ev = e || window.event;
          var y = ev.clientY;
          var x = ev.clientX;
          markinfoCanvas.style.display = "block";
          var stys = getComputedStyle(this, null);
          markinfoCanvas.style.top = parseFloat(stys.top) - 77 + "px";
          let ll =
            $(window).width() < Globals.mobileWidth
              ? parseFloat(stys.left) + 8 - $(markinfoCanvas).width()
              : parseFloat(stys.left) + 8;
          console.log(ll);
          markinfoCanvas.style.left = ll + "px";
          new drawMark(
            markinfoCanvas,
            Globals.ctx,
            function () {
              var el = item.querySelector(".info");
              el.classList.add("on");
            },
            color
          );
        }
      });
    });
  },

  testStroke: function (item, cb) {
    var delay = parseInt(item.dataset.delay) || 1000;
    setTimeout(function () {
      item.classList.add("on");
      if (typeof cb === "function") cb();
    }, delay);
  },

  // 通用元素动画 .gs_fadeinup 集合
  gsRevealAnimate: function () {
    if (document.querySelector(".gs_addclas")) {
      ScrollTrigger.batch(".gs_addclas", {
        batchMax: 1,
        delay: 0.3,
        onEnter: function (batch) {
          batch[0].classList.add("on");
        },
      });
    }

    if (document.querySelector(".about-container")) {
      ScrollTrigger.batch(".about-container", {
        batchMax: 1,
        delay: 0.3,
        onEnter: function (batch) {
          new OurServer("down").main();
        },
        once: true,
      });
    }

    if (document.querySelector(".service-section")) {
      ScrollTrigger.batch(".service-section", {
        batchMax: 1,
        delay: 0.3,
        onEnter: function (batch) {
          new OurServer().main();
        },
        once: true,
      });
    }

    if (document.querySelector(".figure-wrapper")) {
      var figureToggleBtn = document.querySelector(".figure-toggleBtn");
      var figureInfo = document.querySelector(".figure-info");
      gsap.set(figureToggleBtn, {
        opacity: 0,
        y: 0,
      });
      gsap.set(figureInfo, {
        opacity: 0,
      });
      ScrollTrigger.batch(".figure-wrapper", {
        batchMax: 1,
        delay: 0.3,
        onEnter: function (batch) {
          Globals.aboutPage.figureInterElemInit();
          var figureImageWrapper = document.querySelector(".figure-imgWrapper");
          Globals.aboutPage.figureImgAnimate(figureImageWrapper);

          Globals.commonSection.figureInfoShow({
            figureImageWrapper,
            figureToggleBtn,
            figureInfo,
            flag: 1,
          });
        },
        once: true,
      });
    }

    if (document.querySelector(".textStroke")) {
      ScrollTrigger.batch(".textStroke", {
        batchMax: 1,
        onEnter: function (batch) {
          Globals.commonSection.testStroke(batch[0]);
        },
        once: true,
      });
    }

    if (document.querySelector(".mapA")) {
      ScrollTrigger.batch(".mapA", {
        batchMax: 1,
        delay: 0.3,
        onEnter: function (batch) {
          Globals.legendCanClick = false;
          batch[0].classList.add("mapStroke-animate");
          var els = document.querySelectorAll(".markinfo");
          els.forEach(function (el) {
            gsap.to(el, {
              opacity: 1,
              duration: 0.5,
              delay: 2,
            });
          });
        },
        once: true,
      });
    }
  },
  figureInfoShow: function ({
    figureImageWrapper,
    figureToggleBtn,
    figureInfo,
    flag,
  }) {
    function fn() {
      var tl = gsap.timeline();
      if (flag === 1) {
        tl.to(figureToggleBtn, {
          y: "-100%",
          opacity: 1,
          duration: 1,
        });
      }
      tl.to(figureInfo, {
        opacity: 1,
        duration: 1,
        onComplete: function () {
          figureImageWrapper.removeEventListener("transitionend", fn);
        },
      });
    }
    figureImageWrapper.addEventListener("transitionend", fn);
  },
  headerlineAnimate /**未使用 */: function () {
    Globals.tl.add("headerline-start");
    if (document.querySelector(".noanimate")) return;
    Globals.tl.from(
      [".site_logo", ".navbar-link"],
      {
        y: -200,
        ease: "none",
        duration: 0.8,
        stagger: 0.1,
      },
      "headerline-start"
    );
  },

  btnAnimate: function () {
    var btns = document.querySelectorAll(".btn-blue");
    if (typeof ScrollTrigger === "undefined" || !btns[0]) return;
    Globals.btnBlueArr = Array.from(btns).slice();
    Globals.watchBtnScrollTrigger = ScrollTrigger.create({
      interval: 0.3,
      start: 0,
      end: "max",
      onUpdate: updateValues,
    });
    function updateValues() {
      if (!Globals.watchBtnScrollTrigger) return;

      Globals.btnBlueArr.forEach(function (elem, index) {
        if (ScrollTrigger.isInViewport(elem)) {
          Globals.btnBlueArr.splice(index, 1);
          // 所有动画执行完 kill
          if (Globals.btnBlueArr.length === 0) {
            Globals.watchBtnScrollTrigger.kill(false);
            Globals.watchBtnScrollTrigger = null;
          }
          elem.classList.add("entry");
        }
      });
    }
    updateValues();
  },
  _init: function () {
    Globals.commonSection.ifBrowserScrollThenTopLineAddClas();
    Globals.commonSection.magnet();
    Globals.commonSection.mobTopNavHandle();
    Globals.commonSection.moveToMark();
    Globals.commonSection.topLineAnimate();
    Globals.commonSection.dataList();
    Globals.commonSection.initLazyLoad();
    Globals.commonSection.btnAnimate();
    Globals.commonSection.gsRevealAnimate();
    Globals.commonSection.initWOW();
  },
};

Globals.supportlistPage = {
  serviceScreen: function () {
    var serviceRight = document.querySelector(".service-right");
    if (!serviceRight) return;
    document.querySelector(".service-left").style.height =
      serviceRight.clientHeight + "px";
  },
  _init: function () {
    Globals.supportlistPage.serviceScreen();
  },
};

// ------------------------
Globals.indexPage = {
  bannerSwiper: function () {
    var hecH2s = document.querySelectorAll(".hec-h2 a");
    if (hecH2s.length === 0 || typeof Swiper !== "function") return;

    hecH2s.forEach(function (hecH2) {
      new SplitText(hecH2, { type: "chars" });
    });

    var isComponent = true;
    var mySwiper = new Swiper(".banner-swiper", {
      effect: "fade",
      fadeEffect: {
        crossFade: true,
      },
      loop: true,
      noSwiping: true,
      on: {
        init: function () {
          Globals.commonSection.moveToMark();
        },
        slideChange: function (swiper) {
          var tl = gsap.timeline();
          isComponent = false;

          var el = swiper.$el[0];
          var slides = el.querySelectorAll(".banner-swiper-slide");
          var slide = el.querySelectorAll(".banner-swiper-slide")[
            this.activeIndex
          ];

          tl.add("start");
          var title = slide.querySelector(".hec-h2 a");

          var subtitle = slide.querySelector(".hec-p");
          gsap.set(subtitle, {
            opacity: 0,
          });
          tl.from(
            title.children,
            {
              y: 260,
              opacity: 0,
              overwrite: true,
              ease: CustomEase.create(
                "custom",
                "M0,0,C0.084,0.61,0.214,0.802,0.28,0.856,0.356,0.918,0.374,1,1,1"
              ),
              duration: 0.8,
              stagger: {
                each: 0.03,
              },
            },
            "start"
          );
          tl.to(
            subtitle,
            {
              opacity: 1,
            },
            "start+=0.8"
          );

          // 背景图由大到小
          var headerbg = slide.querySelector(".header-bg");
          gsap.set(headerbg, {
            scale: 1.2,
          });
          tl.to(
            headerbg,
            {
              scale: 1,
              duration: 2,
              overwrite: true,
              ease: CustomEase.create(
                "custom",
                "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1"
              ),
            },
            "start"
          );

          tl.add(function () {
            // console.log("所有动画结束");
            isComponent = true;
          });
        },
      },
    });

    document
      .querySelector(".arrow-left")
      .addEventListener("click", function () {
        if (!isComponent) return;
        mySwiper.slidePrev();
      });
    document
      .querySelector(".arrow-right")
      .addEventListener("click", function () {
        if (!isComponent) return;
        mySwiper.slideNext();
      });
  },
  // 第六屏tab点击效果
  sixthScreenTabClick: function () {
    var blogTabline = document.querySelector(".blog-tabline");
    if (!blogTabline) return;
    var tabs = blogTabline.querySelectorAll(".blog-tab");
    var index = 0;
    var a = false;
    tabs.forEach(function (tab, x) {
      tab.addEventListener("click", function () {
        var _this = this;
        tabs.forEach(function (item, z) {
          if (item == _this) {
            index = z;
          }
          item.parentNode.classList.remove("on");
        });

        _this.parentNode.classList.add("on");

        var childs = _this.parentNode.parentNode.nextElementSibling.children;
        Array.from(childs, function (item) {
          item.classList.remove("on");
        });
        childs[index].classList.add("on");
        if (!a) {
          var scrollTop = Globals.getWinScrollTop();
          window.scrollTo({
            top: scrollTop + 1,
          });
          a = true;
        }
      });
    });
  },

  // 第六屏多个swiper效果
  sixthScreenSwiper: function () {
    var blogBodys = document.querySelectorAll(".blog-body");
    if (!blogBodys[0]) return;
    blogBodys.forEach(function (item, index) {
      var a = new Swiper(item, {
        slidesPerView: 1,
        spaceBetween: "4%",
        breakpoints: {
          769: {
            slidesPerView: 3,
            speed: 1200,
            spaceBetween: "4%",
          },
        },
      });
      Globals.blogSwipers.push(a);
    });
  },

  // 第三屏功能
  thirdScreenFun: function () {
    if (typeof Swiper !== "function" || !document.querySelector(".solswp"))
      return;
    if (Globals.windowWidth() <= Globals.mobileWidth) {
      Globals.indexThirdScreenSwiper = new Swiper(".solswp", {
        slidesPerView: 1,
        spaceBetween: 15,
        centeredSlides: false,
        loop: true,
      });
    } else {
      Globals.indexThirdScreenSwiper = new Swiper(".solswp", {
        slidesPerView: 2,
        spaceBetween: 0,
        centeredSlides: false,
        watchSlidesProgress: true,
        loop: true,
        speed: 1500,
        on: {
          progress: function (swiper, progress) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              var slideProgress = Math.abs(this.slides[i].progress);
              var scale = 1 - Math.abs(slideProgress) * 0.3;
              this.slides[i].setAttribute("data-index", slideProgress);
              slide.css("opacity", 1);
              if (Math.abs(slideProgress) > 1) {
                slide.css("opacity", 0);
              }
              slide.transform("scale(" + scale + ")");
            }
          },
          setTransition: function (swiper, transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          },
          init: function (swiper) {
            changeInfo(swiper);
          },
          // slideChange: function (swiper) {

          // },
        },
      });

      function changeInfo(_swiper) {
        var pa = document.querySelector(".parger-active");
        var pt = document.querySelector(".parger-total");
        if (!pa || !pt) return;
        var activeIndex = _swiper.realIndex + 1;
        var len = _swiper.slides.length - 4 < 0 ? 1 : _swiper.slides.length - 4;

        pa.innerHTML = Globals.supplementZero(activeIndex);
        pt.innerHTML = Globals.supplementZero(len);
      }
    }
  },

  // 第三屏swiper 左右按钮切换滑块
  thirdScreenSwitchSlider: function () {
    var pargerPrev = document.querySelector(".parger-prev");
    var pargerNext = document.querySelector(".parger-next");
    if (!pargerPrev || !pargerNext || !Globals.indexThirdScreenSwiper) return;
    pargerPrev.addEventListener("click", function () {
      Globals.indexThirdScreenSwiper.slidePrev();
    });
    pargerNext.addEventListener("click", function () {
      Globals.indexThirdScreenSwiper.slideNext();
    });
  },

  // 获取第二屏的offset.top
  getThirdScreenTop: function () {
    var thirdSection = document.querySelector("#third-section");
    if (!thirdSection) return;
    Globals.thirdSectionOffsetTop = thirdSection.offsetTop;
  },

  // 统一图片父级高度
  unifySetProductListImg: function () {
    var productList = document.querySelector(".product-list");
    if (!productList) return;
    var pics = productList.querySelectorAll(".prm-pic");
    var h = (206 * pics[0].clientWidth) / 304;
    pics.forEach(function (item) {
      item.parentNode.style.height = h + "px";
    });
  },
  _init: function () {
    Globals.indexPage.unifySetProductListImg();
    Globals.indexPage.bannerSwiper();
    Globals.indexPage.thirdScreenFun();
    Globals.indexPage.thirdScreenSwitchSlider();
    Globals.indexPage.sixthScreenTabClick();
    Globals.indexPage.sixthScreenSwiper();
    Globals.commonSection.fourthScreenMarkClickEmit("#fff");
  },
};

// ------------------------
Globals.productPage = {
  // 保持产品列表页面的灰色背景为正方形
  keepCardSquare: function(){
    var fcmElems = document.querySelectorAll(".fcm-elem");
    if (!fcmElems[0]) return;
    fcmElems.forEach(function(items){
      var firgure = $(items).find(".fcm-elem-figure");
      var w = firgure.width();
      firgure.height(w);
    });
  },
  carlZoomSwiper: function () {
    if (!document.querySelector(".carlzoom-container")) return;
    var zoom = (Globals.carlzoom = new carlZoom());
    zoom.init();
  },
  videoFn: function () {
    var playbtn = document.querySelector(".prleft-video");
    if (!playbtn) return;
    var player = videojs("my-player", {
      controls: true,
      autoplay: false,
      preload: "auto",
    });
    var mask = document.querySelector(".mask");
    playbtn.addEventListener("click", function () {
      mask.classList.add("on");
      document.body.classList.add("overflow_hidden");
    });

    document
      .querySelector(".video-close")
      .addEventListener("click", function () {
        try {
          player.pause();
        } catch (err) {
          console.error(err);
        }
        mask.classList.remove("on");
        document.body.classList.remove("overflow_hidden");
      });
  },
  _init: function () {
    Globals.productPage.keepCardSquare();
    Globals.productPage.carlZoomSwiper();
    Globals.productPage.videoFn();
    
  },
};

// ------------------------
Globals.aboutPage = {
  figureImgAnimate: function (imgWrapper) {
    clearTimeout(Globals.aboutPage.timer);
    Globals.aboutPage.timer = setTimeout(function () {
      imgWrapper.classList.add("w100per");
    }, 500);
  },
  figureInterElemInit: function () {
    var figureImgWrappers = document.querySelectorAll(".figure-imgWrapper");
    var figureInfo = document.querySelectorAll(".figure-info");
    figureImgWrappers.forEach(function (bg, index) {
      bg.classList.remove("w100per");
      figureInfo[index].style.opacity = 0;
    });
  },
  // 计算figure-Wrapper中的相关高度
  calcFigureWrapperInit: function () {
    var figureImgs = document.querySelectorAll(".figure-img");
    var figureWrapper = document.querySelector(".figure-wrapper");
    var imgss = document.querySelectorAll(".imgss");
    if (!figureWrapper) return;
    var isMObile = $(window).width() <= Globals.mobileWidth;
    var ww = isMObile
      ? figureWrapper.offsetWidth
      : figureWrapper.offsetWidth * 0.4545455; // swiper左侧图片占据百分比 css中
    var w = figureImgs[0].offsetWidth;
    w = ww !== w ? ww : w;
    var h;
    figureImgs.forEach(function (figureImg, index) {
      var img = imgss[index];
      if (!img) return;
      var src = img.dataset.src;
      var img = new Image();
      img.src = src;
      var iw = img.width || 488; // 防止没有图片手动给个宽高
      var ih = img.height || 281;
      h = (w * ih) / iw;
      figureImg.style.top = isMObile ? 0 : -(h / 2) + "px";
      figureImg.style.width = w + "px";
      figureImg.style["flex-basis"] = isMObile ? "unset" : w + "px";
      figureImg.style.height = h + "px";
      imgss[index].style.width = w + "px";
      imgss[index].style.height = h + "px";
      imgss[index].style["background-size"] = `cover`;
    });
  },
  // 初始化发展历程 的swiper
  /**
   * moveIndex = 0;
   * moveIndex++; +到2的时候左移动
   */
  initDevelopmentSwiper: function () {
    if (!document.querySelector(".dep-swiper")) return;
    Globals.developmentSwiperPrevIndex = 0;
    var paging = document.querySelector(".paging");
    var pagingWidth = paging.clientWidth;
    var yearArr = document.querySelectorAll(".dep-wrapper .dep-year");
    var speed = pagingWidth / 6;
    var moveIndex = 2;
    if (yearArr.length > 6) paging.style.width = speed * yearArr.length + "px";
    Globals.initDevelopmentSwiper = new Swiper(".dep-swiper", {
      breakpoints: {
        769: {
          speed: 1500,
        },
      },
      pagination: {
        el: ".paging",
        clickable: true,
        renderBullet: function (index, className) {
          return (
            '<div class="' +
            className +
            '"><span>' +
            yearArr[index].innerHTML +
            '</span><svg class="dep-svg" width="26" height="26"><circle class="dep-cicle" cx="13" cy="13" r="12" /><circle class="dep-dot" cx="13" cy="13" r="2" /></svg></div>'
          );
        },
        bulletClass: "dep-pagination-dot",
        bulletActiveClass: "active",
      },
      on: {
        slideChange: function (swiper) {
          if (yearArr.length <= 6) return;
          var position = 0;
          // 下一个
          if (swiper.realIndex > Globals.developmentSwiperPrevIndex) {
            position =
              yearArr.length - swiper.realIndex < 4
                ? yearArr.length - 4
                : swiper.realIndex;
            position = position <= moveIndex ? 0 : position - moveIndex;
          } else {
            // 上一个
            position = swiper.realIndex - 3 < 0 ? 0 : swiper.realIndex - 3;
            position = position > 3 ? 3 : position;
          }
          paging.style.transform = "translateX(" + -position * speed + "px)";
          Globals.developmentSwiperPrevIndex = swiper.realIndex;
        },
      },
    });

    this.prevAndNextBtnClickHandler();
  },
  // 左右按钮切换swiper
  prevAndNextBtnClickHandler: function () {
    var prev = document.querySelector(".dep-prev");
    if (!prev) return;
    prev.addEventListener("click", function () {
      Globals.initDevelopmentSwiper.slidePrev();
    });
    var next = document.querySelector(".dep-next");
    if (!next) return;
    next.addEventListener("click", function () {
      Globals.initDevelopmentSwiper.slideNext();
    });
  },
  // 地图区域 legend 的联动
  legendClick: function () {
    var mapldfns = document.querySelectorAll(".mapl-dfn");
    if (!mapldfns[0] /*|| !Globals.legendCanClick*/) return;
    mapldfns.forEach(function (dfn) {
      dfn.addEventListener("click", function () {
        var mark = this.dataset.mark;
        var markDom = document.querySelector("." + mark);
        markDom.querySelector(".circle").click();
      });
    });
  },
  aboutSwiper: function () {
    var index = 0;
    var figureWrapper = document.querySelector(".figure-wrapper");
    if (!figureWrapper) return;
    var nextDom = document.querySelector(".figure-next");
    var prevDom = document.querySelector(".figure-prev");
    var sliders = document.querySelectorAll(".figure-slider");
    var imgss = document.querySelectorAll(".imgss");
    setFigureWrapper(0);
    function setFigureWrapper(index) {
      var h;
      if ($(window).width() > 768) {
        h = 400;
      } else {
        h = parseFloat(getComputedStyle(sliders[index], null).height);
      }
      figureWrapper.style.height = h + "px";
    }
    var slidersLen = sliders.length;
    nextDom.addEventListener("click", function () {
      if (index >= slidersLen - 1) return;
      sliders.forEach(function (item) {
        item.classList.remove("on");
      });
      ++index;
      setFigureWrapper(index);
      var figureImageWrapper =
        sliders[index].querySelector(".figure-imgWrapper");
      var figureInfo = sliders[index].querySelector(".figure-info");
      Globals.aboutPage.figureInterElemInit();
      Globals.aboutPage.figureImgAnimate(figureImageWrapper);
      Globals.commonSection.figureInfoShow({
        figureImageWrapper,
        figureInfo,
      });
      sliders[index].classList.add("on");
    });
    prevDom.addEventListener("click", function () {
      if (index <= 0) return;
      sliders.forEach(function (item) {
        item.classList.remove("on");
      });
      --index;
      setFigureWrapper(index);
      var figureImageWrapper =
        sliders[index].querySelector(".figure-imgWrapper");
      var figureInfo = sliders[index].querySelector(".figure-info");
      Globals.aboutPage.figureInterElemInit();
      Globals.aboutPage.figureImgAnimate(figureImageWrapper);
      Globals.commonSection.figureInfoShow({
        figureImageWrapper,
        figureInfo,
      });
      sliders[index].classList.add("on");
    });
  },
  _init: function () {
    Globals.aboutPage.calcFigureWrapperInit();
    Globals.aboutPage.aboutSwiper();
    Globals.commonSection.fourthScreenMarkClickEmit("#df9a3f");
    Globals.aboutPage.legendClick();
    Globals.aboutPage.initDevelopmentSwiper();
  },
};

// ------------------------
Globals.whenReady(function () {
  if (typeof Globals === "undefined") return;
  document.onkeydown = null;
  Globals.commonSection._init();

  Globals.indexPage._init();

  var pathname = window.location.pathname;
  if (/about/.test(pathname)) {
    Globals.aboutPage._init();
  } else if (/support-list/.test(pathname)) {
    Globals.supportlistPage._init();
  } else if (/product/.test(pathname)) {
    Globals.productPage._init();
  }
});

// ------------------------
window.addEventListener("resize", function () {
  Globals.productPage.keepCardSquare();
  Globals.commonSection.initMap();
  document.querySelector(".carlzoom-container") && Globals.carlzoom.update();
  Globals.indexPage.unifySetProductListImg();
});
